<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=375, initial-scale=1.0">
    <title>我的优惠券</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        body { background: #f6f8fa; }
        .phone-frame { width: 375px; height: 812px; background: #000; border-radius: 40px; padding: 12px; box-shadow: 0 2px 24px rgba(0,0,0,0.06); position: relative; overflow: hidden; margin: 32px auto; }
        .phone-screen { width: 100%; height: 100%; background: #fff; border-radius: 32px; overflow: hidden; display: flex; flex-direction: column; position: relative; }
        .title-bar { height: 48px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #f1f5f9; font-size: 18px; font-weight: bold; color: #22223b; position: relative; }
        .back-btn { position: absolute; left: 18px; top: 8px; background: #fff; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid #e5e7eb; cursor: pointer; }
        .content-area { flex: 1; overflow-y: auto; padding: 0 0 24px 0; }
        .coupon-card {
            display: flex;
            align-items: center;
            background: #fff;
            border-radius: 16px;
            margin: 8px 16px 0 16px;
            padding: 16px 16px 14px 16px;
            box-shadow: 0 2px 8px rgba(37,99,235,0.04);
            border: 1px solid #f1f5f9;
            min-height: 64px;
        }
        .coupon-amount {
            min-width: 60px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .coupon-info {
            flex: 1;
            margin-left: 12px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .coupon-condition-row {
            display: flex;
            align-items: center;
            margin-bottom: 2px;
        }
        .coupon-condition {
            color: #22223b;
            font-size: 15px;
            font-weight: bold;
            margin-right: 10px;
        }
        .coupon-valid {
            color: #94a3b8;
            font-size: 12px;
            flex: 1;
            text-align: right;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .coupon-extra {
            color: #b0b4ba;
            font-size: 12px;
        }
        .coupon-status {
            font-size: 12px;
            font-weight: bold;
            color: #22c55e;
            margin-top: 4px;
        }
        .coupon-status.used { color: #94a3b8; }
        .coupon-status.expired { color: #f87171; }
        .coupon-tab-bar {
            display: flex;
            background: #fff;
            border-bottom: 1px solid #f1f5f9;
            position: sticky;
            top: 0;
            z-index: 10;
        }
        .coupon-tab-bar .tab {
            flex: 1;
            text-align: center;
            padding: 12px 0 10px 0;
            font-size: 16px;
            color: #94a3b8;
            font-weight: 500;
            cursor: pointer;
            border-bottom: 2.5px solid transparent;
            transition: color 0.2s, border-color 0.2s;
        }
        .coupon-tab-bar .tab.active {
            color: #2563eb;
            border-bottom: 2.5px solid #2563eb;
            background: #f6f8fa;
        }
        .coupon-list-area {
            padding-top: 0;
        }
    </style>
</head>
<body>
    <div class="phone-frame">
        <div class="phone-screen">
            <!-- 状态栏（与my.html一致） -->
            <div class="flex items-center justify-between h-7 px-4 bg-white select-none">
                <span class="text-xs font-medium text-black tracking-widest">10:50</span>
                <div class="flex items-center space-x-1">
                    <svg class="w-4 h-4 text-black" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6.5 3.5L4 6m13.5-2.5L20 6M12 8v4l3 3m-3 7a8 8 0 100-16 8 8 0 000 16z"/></svg>
                    <span class="text-[10px] font-bold text-black">5.00</span>
                    <span class="text-[10px] text-black">KB/S</span>
                    <svg class="w-4 h-4 text-black" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.05 7.05A16 16 0 0112 3c2.5 0 4.89.58 7.05 1.64M5.07 10.07A11 11 0 0112 7c2.21 0 4.3.6 6.07 1.64M8.11 13.11A6 6 0 0112 11a6 6 0 013.89 2.11M12 17h.01"/></svg>
                    <svg class="w-4 h-4 text-black" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2 20h.01M7 16v4m5-8v12m5-16v16"/></svg>
                    <span class="text-xs font-bold text-black ml-0.5">5G</span>
                    <div class="flex items-center ml-1">
                        <div class="w-6 h-3 rounded-sm border border-black flex items-center relative">
                            <div class="bg-black h-2 rounded-l-sm" style="width:70%"></div>
                        </div>
                        <span class="text-xs font-bold text-black ml-1">78</span>
                    </div>
                </div>
            </div>
            <!-- 标题栏（与my.html一致，含右侧操作区） -->
            <div class="flex items-center h-12 bg-white select-none border-b border-gray-100 px-4 relative">
                <button class="absolute left-2 top-1/2 -translate-y-1/2 flex items-center justify-center w-8 h-8 rounded-full hover:bg-gray-100" id="backBtn">
                    <i class="fas fa-chevron-left text-lg text-gray-700"></i>
                </button>
                <div class="absolute left-0 right-0 flex justify-center items-center pointer-events-none">
                    <span class="text-base font-medium text-black tracking-wide leading-none">我的优惠券</span>
                </div>
                <div class="flex-shrink-0 flex items-center ml-auto" style="min-width:90px;">
                    <div class="flex items-center bg-white rounded-full border border-gray-200 px-3 py-1 shadow-sm" style="height:36px;">
                        <span class="text-black text-lg font-bold px-1">···</span>
                        <div class="w-px h-5 bg-gray-200 mx-2"></div>
                        <div class="w-6 h-6 rounded-full border border-gray-300 flex items-center justify-center">
                            <svg class="w-4 h-4 text-black" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="6"/></svg>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Tab栏 -->
            <div class="coupon-tab-bar">
                <div class="tab active" data-tab="0">可用</div>
                <div class="tab" data-tab="1">已用</div>
                <div class="tab" data-tab="2">已过期</div>
            </div>
            <!-- 优惠券列表（根据Tab切换内容） -->
            <div class="content-area coupon-list-area">
                <div class="coupon-list" id="couponListAvailable">
                    <!-- 可用优惠券 -->
                    <div class="coupon-card">
                        <div class="coupon-amount">
                            <span class="text-2xl font-bold text-blue-600">￥10</span>
                            <span class="coupon-status">可用</span>
                        </div>
                        <div class="coupon-info">
                            <div class="flex items-center mb-1">
                                <span class="coupon-condition text-base font-bold text-gray-800 mr-2">满100元可用</span>
                            </div>
                            <div class="text-xs text-gray-400">有效期：2024-06-01 ~ 2024-12-31</div>
                        </div>
                    </div>
                    <div class="coupon-card">
                        <div class="coupon-amount">
                            <span class="text-2xl font-bold text-blue-600">￥20</span>
                            <span class="coupon-status">可用</span>
                        </div>
                        <div class="coupon-info">
                            <div class="flex items-center mb-1">
                                <span class="coupon-condition text-base font-bold text-gray-800 mr-2">满200元可用</span>
                            </div>
                            <div class="text-xs text-gray-400">有效期：2024-07-01 ~ 2024-12-31</div>
                        </div>
                    </div>
                    <div class="coupon-card">
                        <div class="coupon-amount">
                            <span class="text-2xl font-bold text-blue-600">￥5</span>
                            <span class="coupon-status">可用</span>
                        </div>
                        <div class="coupon-info">
                            <div class="flex items-center mb-1">
                                <span class="coupon-condition text-base font-bold text-gray-800 mr-2">满50元可用</span>
                            </div>
                            <div class="text-xs text-gray-400">有效期：2024-06-10 ~ 2024-12-31</div>
                        </div>
                    </div>
                </div>
                <div class="coupon-list" id="couponListUsed" style="display:none;">
                    <!-- 已用优惠券 -->
                    <div class="coupon-card" style="position:relative;">
                        <div class="coupon-amount">
                            <span class="text-2xl font-bold" style="color:#22c55e;">￥1</span>
                            <span class="coupon-status used">已用</span>
                        </div>
                        <div class="coupon-info">
                            <div class="flex items-center mb-1">
                                <span class="coupon-condition text-base font-bold text-gray-800 mr-2">满10元可用</span>
                            </div>
                            <div class="text-xs text-gray-400">有效期：2024-06-01 ~ 2024-12-31</div>
                        </div>
                        <a href="order-detail.html?orderId=202406010001"
                           class="absolute top-2 right-2 bg-white rounded-full p-1 shadow-sm text-blue-500 hover:bg-blue-50 hover:text-blue-700 transition"
                           title="查看订单">
                            <i class="fas fa-file-alt text-base"></i>
                        </a>
                    </div>
                    <div class="coupon-card" style="position:relative;">
                        <div class="coupon-amount">
                            <span class="text-2xl font-bold" style="color:#22c55e;">￥8</span>
                            <span class="coupon-status used">已用</span>
                        </div>
                        <div class="coupon-info">
                            <div class="flex items-center mb-1">
                                <span class="coupon-condition text-base font-bold text-gray-800 mr-2">满80元可用</span>
                            </div>
                            <div class="text-xs text-gray-400">有效期：2024-05-01 ~ 2024-12-31</div>
                        </div>
                        <a href="order-detail.html?orderId=202406010002"
                           class="absolute top-2 right-2 bg-white rounded-full p-1 shadow-sm text-blue-500 hover:bg-blue-50 hover:text-blue-700 transition"
                           title="查看订单">
                            <i class="fas fa-file-alt text-base"></i>
                        </a>
                    </div>
                    <div class="coupon-card" style="position:relative;">
                        <div class="coupon-amount">
                            <span class="text-2xl font-bold" style="color:#22c55e;">￥3</span>
                            <span class="coupon-status used">已用</span>
                        </div>
                        <div class="coupon-info">
                            <div class="flex items-center mb-1">
                                <span class="coupon-condition text-base font-bold text-gray-800 mr-2">满30元可用</span>
                            </div>
                            <div class="text-xs text-gray-400">有效期：2024-04-01 ~ 2024-12-31</div>
                        </div>
                        <a href="order-detail.html?orderId=202406010003"
                           class="absolute top-2 right-2 bg-white rounded-full p-1 shadow-sm text-blue-500 hover:bg-blue-50 hover:text-blue-700 transition"
                           title="查看订单">
                            <i class="fas fa-file-alt text-base"></i>
                        </a>
                    </div>
                </div>
                <div class="coupon-list" id="couponListExpired" style="display:none;">
                    <!-- 已过期优惠券 -->
                    <div class="coupon-card">
                        <div class="coupon-amount">
                            <span class="text-2xl font-bold" style="color:#94a3b8;">￥5</span>
                            <span class="coupon-status expired">已过期</span>
                        </div>
                        <div class="coupon-info">
                            <div class="flex items-center mb-1">
                                <span class="coupon-condition text-base font-bold text-gray-800 mr-2">满50元可用</span>
                            </div>
                            <div class="text-xs text-gray-400">有效期：2023-01-01 ~ 2023-12-31</div>
                        </div>
                    </div>
                    <div class="coupon-card">
                        <div class="coupon-amount">
                            <span class="text-2xl font-bold" style="color:#94a3b8;">￥12</span>
                            <span class="coupon-status expired">已过期</span>
                        </div>
                        <div class="coupon-info">
                            <div class="flex items-center mb-1">
                                <span class="coupon-condition text-base font-bold text-gray-800 mr-2">满120元可用</span>
                            </div>
                            <div class="text-xs text-gray-400">有效期：2023-06-01 ~ 2023-12-31</div>
                        </div>
                    </div>
                    <div class="coupon-card">
                        <div class="coupon-amount">
                            <span class="text-2xl font-bold" style="color:#94a3b8;">￥2</span>
                            <span class="coupon-status expired">已过期</span>
                        </div>
                        <div class="coupon-info">
                            <div class="flex items-center mb-1">
                                <span class="coupon-condition text-base font-bold text-gray-800 mr-2">满20元可用</span>
                            </div>
                            <div class="text-xs text-gray-400">有效期：2023-03-01 ~ 2023-12-31</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        document.getElementById('backBtn').onclick = function() {
            window.history.back();
        };
        // Tab切换逻辑
        var tabEls = document.querySelectorAll('.coupon-tab-bar .tab');
        var listAvailable = document.getElementById('couponListAvailable');
        var listUsed = document.getElementById('couponListUsed');
        var listExpired = document.getElementById('couponListExpired');
        tabEls.forEach(function(tab, idx) {
            tab.onclick = function() {
                tabEls.forEach(function(t){ t.classList.remove('active'); });
                tab.classList.add('active');
                listAvailable.style.display = idx===0 ? '' : 'none';
                listUsed.style.display = idx===1 ? '' : 'none';
                listExpired.style.display = idx===2 ? '' : 'none';
            };
        });
    </script>
</body>
</html> 